此文是愛奇藝無線UED負責(zé)人 @愛奇藝_曉生?采訪百度資深用戶界面設(shè)計師 @JJ-Ying?后撰寫的文章，這位GUI達人給我們分享了他的設(shè)計經(jīng)歷和一些觀點，有許多都是干貨，剛?cè)胄械脑O(shè)計師們趕緊來學(xué)習(xí)一下吧。

JJ-Ying 也曾分享過他的自學(xué)過程，想了解的童鞋們可以閱讀這篇：《非科班如何成為UI設(shè)計師？》

先介紹下自己吧

大家好~ 我是 JJ Ying。我一直覺得自己在圈里是比較典型的臉熟程度大過實際能力的設(shè)計師，只是因為早年 GUI 設(shè)計比賽還屈指可數(shù)的時候贏了個獎所以被一些人知曉，其實我也是依舊在設(shè)計路上摸索前行的設(shè)計熱愛者。目前在百度上海繼續(xù)做著「做一款有人每天用的產(chǎn)品」的夢想。

（GUI Champs 2006?獲獎作品）

曉生：

很榮幸你能接受采訪，08 年我還在讀書，你好像已經(jīng)出名了，也很遺憾錯過一起共事的機會。當(dāng)時很好奇，一個學(xué)物理的會轉(zhuǎn)行做設(shè)計，后來發(fā)現(xiàn)GUI很多設(shè)計師都不是科班出身。那早期你是如何學(xué)習(xí) GUI 設(shè)計的？

JJ-Ying：

其實說「轉(zhuǎn)行」不是特別精確，哈哈，因為我在物理專業(yè)這條路上幾乎等于沒開始走~

和大部分設(shè)計師一樣，早期的 GUI 學(xué)習(xí)就是依靠各種練習(xí)。比起其他行業(yè)，做 GUI 的入門門檻是比較低的，因為設(shè)計時使用的專業(yè)軟件比如 Photoshop 上手還是很容易的，一本三流的書或者一些零散的教程就能幫助大家無障礙使用軟件了。

而之后的深入學(xué)習(xí)，關(guān)鍵是如何把這個「術(shù)」轉(zhuǎn)變成「藝」，我自己的經(jīng)驗是這個階段要盡量減少單純的臨摹和練習(xí)，最好結(jié)合實際項目（沒有正式商業(yè)項目的話也可以自己尋找或者想一個課題），在實踐的時候不是單純想怎么做得好看，而要通過設(shè)計去解決一些實際需求。

 

曉生：

作為一名專業(yè)的設(shè)計師，你以為自身成功的關(guān)鍵是什么呢？

JJ-Ying：

培養(yǎng)并且持續(xù)維持熱情。每個把設(shè)計師作為職業(yè)的同學(xué)都會多多少少遇到一些問題，可能是市場環(huán)境沒法幫助我們實踐自己想做的東西、可能是工作內(nèi)容與預(yù)期目標(biāo)有距離、也有可能是覺得自己的付出和收獲不相符。所有這些問題都會一點點磨礪掉我們對設(shè)計的熱情。

工作當(dāng)中要去找到自己的 high 點，保持當(dāng)時入行的初心。

比如我自己一直的愿望就是設(shè)計一些用戶每天會用到的產(chǎn)品，所以經(jīng)常去查找用戶對自己負責(zé)的產(chǎn)品的反饋，不管這些反饋是正向的還是負面，知道有人用我設(shè)計的東西、care 我做的產(chǎn)品就讓我打心底里更有干勁。

 

曉生：

百度和 HP 這樣的外企，設(shè)計氛圍和工作方式有哪些不同呢？

JJ-Ying：

我所待過的這兩個公司差別真的不是一點點，舉個例子吧，我在 HP 參與的第一個正式項目是在我入職之后一年、做完并交付之后 9 個月上市的，而在百度入職之后第二天接到一個需求，第三天完成了初稿，過了個周末第四天調(diào)整了一下完成輸出第五天產(chǎn)品就上線了。

互聯(lián)網(wǎng)產(chǎn)品的一大特征就是「快」，快速迭代多次試錯，內(nèi)部對產(chǎn)品雖然也有長線愿景與目標(biāo)，但很多時候產(chǎn)品的形態(tài)是根據(jù)用戶的反饋、競品的發(fā)展、產(chǎn)業(yè)的趨勢以及實現(xiàn)的技術(shù)快速調(diào)整的。而在惠普打印機部門這種做消費類電子的集團里產(chǎn)品生命周期以年計算，3 年乃至 5 年后的設(shè)計都會有嚴(yán)密的規(guī)劃，因此流程會比較細致，而從軟件到硬件的設(shè)計、開發(fā)團隊在世界各地，設(shè)計工作中不得不把很多環(huán)節(jié)都文檔化，并且花很多時間在溝通上。

 

曉生：

從你的微博可以看出，視野很廣，經(jīng)常上哪些網(wǎng)站呢？

JJ-Ying：

在博客時代我曾經(jīng)很即可地訂閱了無數(shù)設(shè)計博客，但是資源日漸泛濫之后發(fā)覺大家的內(nèi)容同質(zhì)化很嚴(yán)重，所以后來也放棄 RSS 閱讀器，轉(zhuǎn)用 Flipboard 去隨意地瀏覽~ 但目前還是有那么幾個網(wǎng)站我是每篇必看的：

Sidebar.io

一個設(shè)計鏈接聚合，每天 5 篇左右的精華文章。另外目前剛出現(xiàn)的?Designer News?也是個不錯的設(shè)計 Link 聚合網(wǎng)站

Dribbble

雖然這個就像 GUI 設(shè)計師的門戶網(wǎng)站，很多人每天都上，但是依然有非常多的朋友問我怎么利用這個網(wǎng)站。上面既沒什么教程又不是滿屏大圖，怎么學(xué)習(xí)呢？其實大家不必刻意地去找那些細致的 step-by-step 教程，并不是學(xué)會了某個技法、某種表現(xiàn)形式怎么實現(xiàn)才叫學(xué)習(xí)。開拓自己的眼界，看看別人尤其是那些優(yōu)秀的設(shè)計師在做些什么在探索些什么對于自己的幫助更大。對于我自己來說，每天上 Dribbble 看大家牛叉作品的一個重要作用是告訴自己這個世界上不管哪個方面都有比我牛x幾百倍的人，而且很多比自己要勤奮很多，我要有危機感。
相關(guān)閱讀：
《設(shè)計師必讀！玩轉(zhuǎn)Dribbble終極指南》

Boston

很多紀(jì)實攝影的佳作，幫助我以其他人的視角更好地了解這個世界

Brand New

Logo 設(shè)計方面最棒的博客了，作者的咨詢十分新鮮，語言十分有趣和犀利

?Beautiful Pixels

被這個網(wǎng)站的介紹騙了不少錢，下了很多華而不實的 App，但總的來說這上面還是有很多設(shè)計得不錯的 App 推薦給大家。

 

曉生：

你最喜歡哪些 App 的界面設(shè)計呢？為什么？

JJ-Ying：

National Parks

這個拿下了去年 Apple Design Award 的明星 App 在交互和視覺上頗具創(chuàng)新，尤其是動效讓我印象非常深刻。

Jetsetter

也是旅游行業(yè)的一個 App，設(shè)計非常簡約，但是同樣動效豐富。特別喜歡他的標(biāo)題導(dǎo)航欄：始終存在于左上角的圓形在第一層級是產(chǎn)品 Logo 的一部分，轉(zhuǎn)場的時候承載「菊花」，子頁面中又充當(dāng)了返回按鈕。這些過程之間的轉(zhuǎn)場也很自然。

多年前的 Path

?

當(dāng)那個驚為天人的時間軸界面還沒出現(xiàn)、當(dāng)國內(nèi)的互聯(lián)網(wǎng)行業(yè)從業(yè)人員還沒涌入的時候 1.x 版的 Path 還是一個單純的照片分享應(yīng)用。很懷念當(dāng)時那個縮略圖都是橫條的設(shè)計是因為那時候整個產(chǎn)品使用起來很有「韻律」。主頁面上可以快速瀏覽大量的朋友照片，喜歡的點細條放大，很單純，很美好。

 

曉生：

App 界面設(shè)計中字體非常重要，但手機操作系統(tǒng)中中文字體非常有限，如何才能做好中文界面的排版呢？

JJ-Ying：

常聽到朋友們抱怨說現(xiàn)在很多人畫一枚寫實圖標(biāo)就算是做過界面設(shè)計了，其實界面設(shè)計中非常重要的一環(huán)是布局和排版，排版的終極目標(biāo)是讓文字像優(yōu)秀印刷品一樣讓人讀起來愉悅，而布局的終極目標(biāo)是能梳理清楚界面中的層級關(guān)系。

中文字體選擇少，限制多這個現(xiàn)象在移動平臺乃至網(wǎng)頁端短期內(nèi)都不可能解決，但有時候我覺得這反而對設(shè)計師來說是個很好的機會。因為這會讓我們把眼光從字體好看與否轉(zhuǎn)移到布局本身。當(dāng)邊界條件比較嚴(yán)苛的情況下我們就只能利用最基礎(chǔ)的那些大小、顏色對比、點線面等基礎(chǔ)元素去做設(shè)計。

 

曉生：

你最得意的設(shè)計作品是什么，是否可以分享下其中的故事？

JJ-Ying：

我想說是我的個人博客圖月志。出于興趣從 06 年開始寫關(guān)于界面設(shè)計的博客。多年過去了好友鏈接里的 Link 一個個失效但我自己還在堅持。從內(nèi)容上積淀了一些我自己的觀點，而從設(shè)計本身來講也一直作為一個前段技術(shù)的實驗田被我翻來覆去得折騰。因為這個這個「產(chǎn)品」的 PM 就是我自己，所以在設(shè)計上能很自由地實驗各種新的技術(shù)，從以前的 web font 到后來的響應(yīng)式設(shè)計。

 

曉生：

你參與過 WebOS 設(shè)計吧？你如何評價它的界面設(shè)計？一直認為它的設(shè)計可以和iPhone 媲美，可惜商業(yè)方面非常的失敗。

JJ-Ying：

WebOS 在被 HP 收購之后從行政、開發(fā)和設(shè)計上一直比較獨立，我沒有直接參與過 WebOS 在手機上的界面設(shè)計，但是當(dāng) WebOS 還是 HP 一枚重要棋子，打算在 PC、打印機等產(chǎn)品上全線切換 WebOS 的時候參與了一些概念設(shè)計。

雖然很多人都對 WebOS 的界面設(shè)計記憶猶新、贊不絕口。但是單純從視覺設(shè)計上來說我想潑個冷水。我認為他的統(tǒng)一性略有欠缺，iOS 上也有各種「千奇百怪」的采用擬物設(shè)計的原生 App，但是當(dāng)你見到下圖這樣的界面之后馬上就能意識到這是 iOS。而在 WebOS 上各種質(zhì)感、布局的處理不得不說精美，但缺少一些全局性的視覺線索，這個問題當(dāng)我們 Team 在嘗試把 WebOS 的界面移植到 HP 其他產(chǎn)品上的時候就突顯出來了。

不過在同硬件的結(jié)合上 WebOS 做得非常好，不論是交互上的一些創(chuàng)新操作模式，還是視覺上統(tǒng)領(lǐng)軟硬件的大圓角設(shè)計，都是典范。也許這點也是最終導(dǎo)致 WebOS 沒有用到 HP 全線產(chǎn)品上的原因之一，因為他很難去適配其他不是按照 Palm 原有美學(xué)理念去設(shè)計的其他硬件。

今天碰巧傳來了 WebOS 開源之后又被 LG 收購的消息，如果真的被應(yīng)用在家電上的話很有可能這個品牌就會被抹去，真是非常可惜啊。

 

曉生：

你如何看待 Metro 風(fēng)格？個人感覺有些超前，更適合內(nèi)容型 APP。

JJ-Ying：

在知乎上我曾談到 Metro UI 的風(fēng)格看起來與眾不同的一部分原因是因為要和市場上已經(jīng)有的成熟產(chǎn)品 iOS 和 Android 做差異化。

當(dāng)然他也不是完全為了不一樣而不一樣， 往前追溯到第一代 Zune 播放器界面和更早的 Windows XP Media Center 版的一些設(shè)計風(fēng)格就已經(jīng)能看出 Metro 的影子來了，所以微軟是為了和兩大競爭對手產(chǎn)生差異化 而在內(nèi)部已經(jīng)形成的一些風(fēng)格上進行了梳理、強化和普遍運用。

很多人認為 Metro 就是 平面化、就是用大字體，其實除了這些外在特征更包含了很多在交互與視覺上的變革。當(dāng)變革出現(xiàn)時， 用戶熟悉和接受必然需要一個過程，而且個性化強的設(shè)計很容易發(fā)生「喜歡的人很喜歡，討厭的人賊討厭」的狀況。再加上配套硬件的不給力，所以 Metro 風(fēng)格離占領(lǐng)市場還有很多路要走。

第二代 Zune（2007年）：

第一代 Zune（2006年）：

Windows XP Media Center 版（2004年）：

曉生：

作為設(shè)計師，會不停的學(xué)習(xí)和積累知識，比如為了設(shè)計好視頻客戶端，會建議我們的設(shè)計師學(xué)習(xí)海報等傳統(tǒng)領(lǐng)域的設(shè)計，你有同樣的感受嗎？平時會從哪些地方尋找設(shè)計靈感？

JJ-Ying：

設(shè)計師尤其是視覺設(shè)計師，也包括我自己很容易掉落的一個趨勢（現(xiàn)在貌似流行說閉環(huán)）是「接到需求 > 理解需求 > 找類似產(chǎn)品做參考 > 揉和進需求所需要的品牌特征 > 產(chǎn)出」。其實美是相通的，我的建議是在尋找靈感階段多收集一些和產(chǎn)品無關(guān)的內(nèi)容，甚至可以是一張風(fēng)景照。當(dāng)眼光跳出其他人設(shè)定好的圈圈之后往往能有不一樣的收獲。

另外很多設(shè)計記得可以嘗試「留過夜」，這也是另一種跳出當(dāng)前思維的方式。

 

曉生：

最近有關(guān)注哪些領(lǐng)域的設(shè)計，或者在做新的嘗試嗎？

JJ-Ying：

最近對 Motion Design 頗感興趣。在自己的業(yè)余時間和工作中都嘗試把這些更多融入界面當(dāng)中。

我們的硬件和系統(tǒng)越來越先進之后現(xiàn)在在移動設(shè)備和 web 上都已經(jīng)能實現(xiàn)很多細致的轉(zhuǎn)場動畫了。雖然動畫不是新鮮的東西，但在真是產(chǎn)品當(dāng)中這些以毫秒計算的短小動效有時候能起到很好的幫助用戶理解界面、減少學(xué)習(xí)時間。

 

曉生：

每個設(shè)計師都有自己的風(fēng)格，你喜歡哪些風(fēng)格呢？

JJ-Ying：

視覺設(shè)計的風(fēng)格、包括技術(shù)是變化很快的，比如兩年前大家張口閉口都說響應(yīng)式設(shè)計，去年大家都把網(wǎng)頁做成視察滾動的，而現(xiàn)在打開主流設(shè)計博客和設(shè)計師網(wǎng)站，哪個沒討論過Flat design vs ?skeuomorphism。

我喜歡的風(fēng)格其實不關(guān)乎這些表象，而是其中的「細節(jié)」。

比如流傳了很久的字體 Helvetica，甚至再早一點 Futura，嘗試去了解其中的精巧細節(jié)為什么被作者設(shè)計成那樣之后會覺得很了不起，幾十年過去了，我們現(xiàn)在依舊每天使用著他們，最終成就這些經(jīng)典的不是諸如「去個性化」、「幾何形體」這種外在視覺風(fēng)格，而是細節(jié)。所以我喜歡所有「關(guān)注細節(jié)」的設(shè)計。

 

曉生：

看到你?Dribbble?上一款 Mac 輸入法面板，設(shè)計師自己不是用戶，應(yīng)該如何去提煉關(guān)鍵性元素（比如顏色/字體等）？

很早以前就有過爭論，關(guān)于設(shè)計師是不是要去嘗試「扮演」用戶以更好地理解產(chǎn)品。視覺設(shè)計這方面其實是個部分包含了感性元素的東西，所以要設(shè)計出對于某些人群有針對性的產(chǎn)品需要去觀察。

設(shè)計都是來源于生活。

每個人的審美也是在日常生活中可以流露出來的。這種觀察需要平時去積累，多接觸不一樣的人多了解他們的生活，并且，多觀察。

 

原文地址：daichuanqing
作者：@愛奇藝_曉生

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：